<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--常量式写法-->
    <com-a age="19" gender="男"></com-a>
    <!--变量式写法-->
    <com-a v-bind:age="age" :gender="gender"></com-a>
    <!--❌
        <com-a :age="19" :gender="男"></com-a>
    -->
    <com-a :age="'19'" :gender="'男'"></com-a>
    <!--data和props重名-->
    <com-a :id="id" :age="age" :gender="gender"></com-a>
</div>
</body>
</html>
<script src="../js/vue.min.js"></script>
<script>
    Vue.component('com-a', {
        data() {
            return {
                id: 1,
                name: 'admin'
            }
        },
        props: ['age', 'gender', 'id'],
        template: `
          <div>
            <h3>我是组件com-a</h3>
            <p>id:{{ id }}</p>
            <p>name:{{ name }}</p>
            <p>age:{{ age }}</p>
            <p>gender:{{ gender }}</p>
          </div>
        `
    })
    new Vue({
        el: '#app',
        data() {
            return {
                id: 8,
                age: Math.floor(Math.random() * 30 + 20),
                gender: '男'
            }
        }
    })
</script>